<template>
    <div class="context">
        <div class="dialog">
            <el-dialog v-model="isDialog" width="30%" top="20%" :modal='true' title="提示">
                <div class="dialog-content">{{ message }}</div>
            </el-dialog>
        </div>
        <div class="from">
            <div
                style="width: 100%; height: 100%;justify-content: space-around; display: flex; flex-direction: column;">
                <div style="width: 100%; display: flex; justify-content: center;">
                    <h1 v-if="type == '1'">登录</h1>
                    <h1 v-if="type == '2'">注册</h1>
                    <text style="height: 90%; width: 30%; 
                        justify-content: center; 
                        display: flex; 
                        align-items: flex-end" @click="type = '2'" v-if="type == '1'">
                        点击注册</text>
                    <text style="height: 90%; 
                        width: 30%; 
                        display: flex;
                        justify-content: center;
                        align-items: flex-end;" @click="type = '1'" v-if="type == '2'">
                        点击登录</text>
                </div>
                <div class="input-item">
                    <label for="username" class="text">用户名:</label>
                    <input type="text" class="input" v-model="username">
                </div>
                <div class="input-item">
                    <label for="password" class="text">密码:</label>
                    <input type='password' class="input" v-model="password">
                </div>
                <div class="btn-group">
                    <button form-type="submit" style="width: 20%;" @click="onsubmit">
                        {{ type == '1' ? '登录' : '注册' }}
                    </button>
                    <button form-type="reset" style="width: 20%;" @click="onreset">重置</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRoute } from "vue-router";
import back from "../components/back.vue";
import { http } from "@/service/http";
import type { LogRegResult, userData } from "@/type/login";
import { log, reg } from "@/service/logReg";
import { useRouter } from 'vue-router';
import { useInfoStore } from "@/stores/userInfoStore";
const route = useRoute()
const router = useRouter()
const isDialog = ref(false)
const userData = ref<userData[] | null>()
const password = ref('')
const username = ref('')
// route.query.type 用于提取 URL 中的 type 参数
// console.log('type', route.query.type)
let type = ref('1')
const message = ref('')
const infoStore = useInfoStore()
const onsubmit = async () => {
    if (type.value == '1') {
        const res = await log(username.value, password.value)
        userData.value = res.data
        // console.log('login', userData.value)
        infoStore.setInfo(userData.value?.[0])
        // console.log('userData', infoStore.getInfo())
        open(res.message)
        if(res.data){
            setTimeout(() => {
            router.push(`/menu`)
        }, 1000)
    }
    }
    else if (type.value == '2') {
        const res = await reg(username.value, password.value)
        userData.value = res.data
        console.log('register', userData.value)
        open(res.message)
        setTimeout(() => {
            onreset()
            router.push('/')
        }, 1000)

    }
}
const open = (mes: string) => {
    message.value = mes
    isDialog.value = true
}

const onreset = () => {
    password.value = ''
    username.value = ''
}

</script>

<style>
.text {
    width: 15%;
}

.from {
    padding: 10px;
    width: 30%;
    height: 35%;
    background-color: #f1f2f189;
    justify-self: center;
    align-self: center;
    margin-top: 15%;
    box-shadow: 5px 5px 5px #888888c0;
    border-radius: 5%;
}

.input {
    width: 70%;
}

.top {
    width: 100%;
    display: flex;
}

.input-item {
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.context {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.btn-group {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.dialog {
    background-color: white;
}

.dialog-content {
    text-align: center;
    font-size: 20px;
    color: #333;
    width: 100%;
    margin-bottom: 8%;
}
</style>